<template>
  <div class="map-container" id="province">
    <div class="echarts" id="echarts"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      valueList: [
        { accept: 36, result: 35, areaCode: 533300 },
        { accept: 117, result: 117, areaCode: 530700 },
        { accept: 268, result: 267, areaCode: 532800 },
        { accept: 142, result: 142, areaCode: 530900 },
        { accept: 215, result: 214, areaCode: 530800 },
        { accept: 370, result: 370, areaCode: 530600 },
        { accept: 135, result: 135, areaCode: 533100 },
        { accept: 533, result: 533, areaCode: 530300 },
        { accept: 248, result: 248, areaCode: 530500 },
        { accept: 290, result: 290, areaCode: 532900 },
        { accept: 658, result: 657, areaCode: 532500 },
        { accept: 238, result: 238, areaCode: 532600 },
        { accept: 989, result: 985, areaCode: 530100 },
        { accept: 299, result: 299, areaCode: 530400 },
        { accept: 192, result: 192, areaCode: 532300 },
        { accept: 90, result: 88, areaCode: 533400 }
      ],
      listArr: [], //城市json
      ynCodeList: [
        530000,
        530100,
        530300,
        530400,
        530500,
        530600,
        530700,
        530800,
        530900,
        532300,
        532500,
        532600,
        532800,
        532900,
        533100,
        533300,
        533400
      ]
    };
  },
  created() {},
  mounted() {
    this.getWidth();
    echarts.extendsMap = function(id, opt) {
      // 实例
      var chart = this.init(document.getElementById(id));
      let _this = this;
      var curGeoJson = {};
      var cityMap = {
        云南: 530000,
        昆明市: 530100,
        曲靖市: 530300,
        玉溪市: 530400,
        保山市: 530500,
        昭通市: 530600,
        丽江市: 530700,
        普洱市: 530800,
        临沧市: 530900,
        楚雄州: 532300,
        红河州: 532500,
        文山州: 532600,
        西双版纳州: 532800,
        大理州: 532900,
        德宏州: 533100,
        怒江州: 533300,
        迪庆州: 533400
      };
      var geoCoordMap = {
        昆明市: [102.712251, 25.040609],
        曲靖市: [103.797851, 25.501557],
        玉溪市: [102.543907, 24.350461],
        保山市: [99.167133, 25.111802],
        昭通市: [103.717216, 27.336999],
        丽江市: [100.233026, 26.872108],
        普洱市: [100.972344, 22.777321],
        临沧市: [100.08697, 23.886567],
        楚雄彝族自治州: [101.546046, 25.041988],
        红河哈尼族彝族自治州: [103.384182, 23.366775],
        文山壮族苗族自治州: [104.24401, 23.36951],
        西双版纳傣族自治州: [100.797941, 22.001724],
        大理白族自治州: [100.225668, 25.589449],
        德宏傣族景颇族自治州: [98.578363, 24.436694],
        怒江傈僳族自治州: [98.854304, 25.850949],
        迪庆藏族自治州: [99.706463, 27.826853]
      };
      var levelColorMap = {
        "1": "rgba(241, 109, 115, .8)",
        "2": "rgba(255, 235, 59, .7)",
        "3": "rgba(147, 235, 248, 1)"
      };

      var defaultOpt = {
        mapName: "china", // 地图展示
        goDown: false, // 是否下钻
        bgColor: "#404a59", // 画布背景色
        activeArea: [], // 区域高亮,同echarts配置项
        data: [],
        // 下钻回调(点击的地图名、实例对象option、实例对象)
        callback: function(name, option, instance) {}
      };
      if (opt) opt = this.util.extend(defaultOpt, opt);

      // 层级索引
      var name = [opt.mapName];
      var idx = 0;
      var pos = {
        leftPlus: 45,
        leftCur: 10,
        left: 0,
        top: 16
      };

      var line = [
        [0, 0],
        [8, 11],
        [0, 22]
      ];
      // style
      var style = {
        font: '18px "Microsoft YaHei", sans-serif',
        textColor: "#eee",
        lineColor: "rgba(147, 235, 248, .8)"
      };

      var handleEvents = {
        /**
         * i 实例对象
         * o option
         * n 地图名
         **/
        resetOption: function(i, o, n) {
          var breadcrumb = this.createBreadcrumb(n);

          var j = name.indexOf(n);
          var l = o.graphic.length;

          if (j < 0) {
            o.graphic.push(breadcrumb);
            o.graphic[0].children[0].shape.x2 = 145;
            o.graphic[0].children[1].shape.x2 = 145;
            if (o.graphic.length > 2) {
              for (var x = 0; x < opt.data.length; x++) {
                if (n === opt.data[x].name) {
                  o.series[0].data = handleEvents.initSeriesData([opt.data[x]]);
                  break;
                } else {
                  o.series[0].data = [];
                }
              }
            }
            name.push(n);
            idx++;
          } else {
            o.graphic.splice(j + 2, l);
            if (o.graphic.length <= 2) {
              o.graphic[0].children[0].shape.x2 = 60;
              o.graphic[0].children[1].shape.x2 = 60;
              o.series[0].data = handleEvents.initSeriesData(opt.data);
            }
            name.splice(j + 1, l);
            idx = j;
            pos.leftCur -= pos.leftPlus * (l - j - 1);
          }

          o.geo.map = n;
          // o.geo.zoom = 0.4;
          i.clear();
          i.setOption(o);
          // this.zoomAnimation();
          opt.callback(n, o, i);
        },

        /**
         * name 地图名
         **/
        createBreadcrumb: function(name) {
          var cityToPinyin = {
            云南: 530000,
            昆明市: 530100,
            曲靖市: 530300,
            玉溪市: 530400,
            保山市: 530500,
            昭通市: 530600,
            丽江市: 530700,
            普洱市: 530800,
            临沧市: 530900,
            楚雄州: 532300,
            红河州: 532500,
            文山州: 532600,
            西双版纳州: 532800,
            大理州: 532900,
            德宏州: 533100,
            怒江州: 533300,
            迪庆州: 533400
          };

          var breadcrumb = {
            type: "group",
            id: name,
            left: pos.leftCur + pos.leftPlus,
            top: pos.top + 3,
            children: [
              {
                type: "polyline",
                left: -85,
                top: -8,
                shape: {
                  points: line
                },
                style: {
                  stroke: "#fff",
                  key: name
                  // lineWidth: 2,
                },
                onclick: function() {
                  var name = this.style.key;
                  handleEvents.resetOption(chart, option, name);
                }
              },
              {
                type: "text",
                left: -68,
                top: "middle",
                style: {
                  text: name,
                  textAlign: "center",
                  fill: style.textColor,
                  font: style.font
                },
                onclick: function() {
                  var name = this.style.text;
                  handleEvents.resetOption(chart, option, name);
                }
              },
              {
                type: "text",
                left: -68,
                top: 10,
                style: {
                  name: name,
                  text: cityToPinyin[name] ? cityToPinyin[name] : "",
                  textAlign: "center",
                  fill: style.textColor,
                  font: '12px "Microsoft YaHei", sans-serif'
                },
                onclick: function() {
                  // console.log(this.style);
                  var name = this.style.name;
                  handleEvents.resetOption(chart, option, name);
                }
              }
            ]
          };

          pos.leftCur += pos.leftPlus;

          return breadcrumb;
        },

        // 设置effectscatter
        initSeriesData: function(data) {
          var temp = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              temp.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value, data[i].level)
              });
            }
          }
          return temp;
        },

        zoomAnimation: function() {
          var count = null;
          var zoom = function(per) {
            if (!count) count = per;
            count = count + per;
            // console.log(per,count);
            chart.setOption({
              geo: {
                zoom: count
              }
            });
            if (count < 1)
              window.requestAnimationFrame(function() {
                zoom(0.2);
              });
          };
          window.requestAnimationFrame(function() {
            zoom(0.2);
          });
        }
      };

      var option = {
        backgroundColor: opt.bgColor,
        graphic: [
          {
            type: "group",
            left: 10,
            top: 10,
            children: [
              {
                type: "line",
                left: 10,
                top: -30,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 60,
                  y2: 0
                },
                style: {
                  stroke: style.lineColor
                }
              },
              {
                type: "line",
                left: 10,
                top: 10,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 60,
                  y2: 0
                },
                style: {
                  stroke: style.lineColor
                }
              }
            ]
          },
          {
            id: name[idx],
            type: "group",
            left: 10,
            top: "10",
            children: [
              {
                type: "polyline",
                left: 10,
                top: -15,
                shape: {
                  points: line
                },
                style: {
                  stroke: "transparent",
                  key: name[0]
                },
                onclick: function() {
                  var name = this.style.key;
                  handleEvents.resetOption(chart, option, name);
                }
              },
              {
                type: "text",
                left: 0,
                top: -6,
                style: {
                  text: "云南",
                  textAlign: "center",
                  fill: style.textColor,
                  font: style.font
                },
                onclick: function() {
                  handleEvents.resetOption(chart, option, "云南");
                }
              },
              {
                type: "text",
                left: 0,
                top: 13,
                style: {
                  text: "530000",
                  textAlign: "center",
                  fill: style.textColor,
                  font: '12px "Microsoft YaHei", sans-serif'
                },
                onclick: function() {
                  handleEvents.resetOption(chart, option, "云南");
                }
              }
            ]
          }
        ],
        geo: {
          map: opt.mapName,
          // roam: true,
          zoom: 1,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            emphasis: {
              textStyle: {
                color: "#fff"
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0
            }
          },
          regions: opt.activeArea.map(function(item) {
            if (typeof item !== "string") {
              return {
                name: item.name,
                itemStyle: {
                  normal: {
                    areaColor: item.areaColor || "#389BB7"
                  }
                },
                label: {
                  normal: {
                    show: item.showLabel,
                    textStyle: {
                      color: "#fff"
                    }
                  }
                }
              };
            } else {
              return {
                name: item,
                itemStyle: {
                  normal: {
                    borderColor: "#91e6ff",
                    areaColor: "#389BB7"
                  }
                }
              };
            }
          })
        },
      
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            // symbol: 'diamond',
            showEffectOn: "render",
            rippleEffect: {
              period: 15,
              scale: 6,
              brushType: "fill"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: function(params) {
                  return levelColorMap[params.value[3]];
                },
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },
            data: handleEvents.initSeriesData(opt.data)
          }
        ],

        tooltip: {
          padding: 0,
          backgroundColor: "transparent",
          formatter: params => {
            return `<table style="background: #3f5c6d2c;color: #fdffff" border="1" class="map__tooltip o_font20">
                                    <thead>
                                       <tr>
                                           <th>总受理量</th> <th>总办结量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>${params.data.accept}</td><td>${params.data.result}</td>
                                         </tr>
                                    </tbody>
                                </table>`;
          }
        }
      };

      chart.setOption(option);
      // 添加事件

      chart.on("click", function(params) {
        var _self = this;

        if (opt.goDown && params.name !== name[idx]) {
          if (cityMap[params.name]) {
            var url = cityMap[params.name];

            import("@/views/echart/yunnan/" + url + ".geo").then(response => {
              curGeoJson = response;
              echarts.registerMap(params.name, response);
              handleEvents.resetOption(_self, option, params.name);
            });
          }
        }
      });

      chart.setMap = function(mapName) {
        var _self = this;
        if (mapName.indexOf("市") < 0) mapName = mapName + "市";
        var citySource = cityMap[mapName];
        if (citySource) {
          var url = "./map/" + citySource + ".json";
          $.get(url, function(response) {
            // console.log(response);
            curGeoJson = response;
            echarts.registerMap(mapName, response);
            handleEvents.resetOption(_self, option, mapName);
          });
        }
        // handleEvents.resetOption(this, option, mapName);
      };

      return chart;
    };

    import("@/views/echart/yunnan/530000.geo").then(res => {
      echarts.registerMap("云南", res);
      //  this.getCityGeo(530000, "云南省");
      var myChart = echarts.extendsMap("echarts", {
        bgColor: "#154e90", // 画布背景色
        mapName: "云南", // 地图名
        goDown: true, // 是否下钻
        // 下钻回调
        callback: function(name, option, instance) {
          console.log(name, option, instance);
        },
        // 数据展示
        data: [
          { name: "昆明市", value: 800, level: 2 },
          { name: "曲靖市", value: 90, level: 1 },
          { name: "玉溪市", value: 77, level: 1 },
          { name: "保山市", value: 90, level: 1 },
          { name: "昭通市", value: 100, level: 1 },
          { name: "丽江市", value: 65, level: 2 },
          { name: "普洱市", value: 90, level: 1 },
          { name: "临沧市", value: 50, level: 1 },
          { name: "楚雄彝族自治州", value: 99, level: 1 },
          { name: "红河哈尼族彝族自治州", value: 65, level: 1 },
          { name: "文山壮族苗族自治州", value: 45, level: 10 },
          { name: "西双版纳傣族自治州", value: 70, level: 1 },
          { name: "大理白族自治州", value: 30, level: 1 },
          { name: "德宏傣族景颇族自治州", value: 79, level: 1 },
          { name: "怒江傈僳族自治州", value: 30, level: 1 },
          { name: "迪庆藏族自治州", value: 78, level: 1 }
        ]
      });
    });
  },
  methods: {
    getWidth() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.25 + "px";
      let h = ch * 0.48 + "px";
      document.getElementById("province").style.width = w;
      document.getElementById("province").style.height = h;
    }
  }
};
</script>

<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
